﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<style>
    .tab-pane ul,fieldset ul {
        list-style: none;
        padding-left: 10px;
        border:1px inset #ccc;
        margin-bottom:0px;
        overflow:scroll;
    }

    .tab-pane ul li, fieldset ul li{
        display: inline-block;
        margin-right: 5px;
    }

    i {
        cursor: pointer;
    }

    #selectList {
        padding-top: 3px;
    }

    #selectList li {
        margin-bottom:3px;
        padding: 3px;
        border: 1px solid #ccc;
    }

    #selectList li i {
        margin-left:3px;
    }

    #form1 > div {
        margin-top: 10px;
        width: calc(50% - 2px);
        display: inline-block;
    }

    .search .form-group, .search .checkbox {
        display: inline-block;
        margin: 3px;
    }

    .search .checkbox label{
        line-height:20px;
    }

        .search .form-group .form-control {
            padding: 3px 6px;
            height:29px;
        }

        fieldset legend{
            margin-bottom:5px;
        }
</style>
<form id="form1">
    <div>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#users" data-toggle="tab">人员</a></li>
            <li><a href="#roles" data-toggle="tab">角色</a></li>
            <li><a href="#deps" data-toggle="tab">部门</a></li>
            <li><a href="#posts" data-toggle="tab">岗位</a></li>
        </ul>
        <div class="tab-content">
            <div id="users" class="tab-pane active">
                <div class="search">
                    <div class="form-group">
                        <input type="text" placeholder="关键字" id="userKws" name="userKws" class="form-control" />
                    </div>
                    <i class="fa fa-search" data-type="u"></i>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="ckAllUser" name="ckAllUser" data-type="u" /> 全部
                        </label>
                    </div>
                </div>
                <ul id="userList">
                </ul>
            </div>
            <div id="roles" class="tab-pane">
                <div class="search">
                    <div class="form-group">
                        <input type="text" placeholder="关键字" id="roleKws" name="roleKws" class="form-control" />
                    </div>
                    <i class="fa fa-search" data-type="r"></i>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="ckAllRole" name="ckAllRole" data-type="r" /> 全部
                        </label>
                    </div>
                </div>
                <ul id="roleList">
                </ul>
            </div>
            <div id="deps" class="tab-pane">
                <div class="search">
                    <div class="form-group">
                        <input type="text" placeholder="关键字" id="depKws" name="depKws" class="form-control" />
                    </div>
                    <i class="fa fa-search" data-type="d"></i>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="ckAllDep" name="ckAllDep" data-type="d" /> 全部
                        </label>
                    </div>
                </div>
                <ul id="depList">
                </ul>
            </div>
            <div id="posts" class="tab-pane">
                <div class="search">
                    <div class="form-group">
                        <input type="text" placeholder="关键字" id="postKws" name="postKws" class="form-control" />
                    </div>
                    <i class="fa fa-search" data-type="p"></i>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="ckAllPost" name="ckAllPost" data-type="p" /> 全部
                        </label>
                    </div>
                </div>
                <ul id="postList">
                </ul>
            </div>
        </div>
    </div>
    <div style="float:right;margin-top:18px;">
        <fieldset>
            <legend>已选择</legend>
            <ul id="selectList">
                
            </ul>
        </fieldset>
    </div>
</form>
<script>
    //多选
    var multi = true;

    function init(users) {
        $("#selectList").empty();
        if (users && users.name && users.ids
            && users.name.length > 0
            && users.name.length == users.ids.length) {
            if (multi) {
                for (var i = 0, j = users.name.length; i < j; i++) {
                    var type = users.ids[i].substr(0, 1);
                    var item = $("<li><span></span><i class=\"fa fa-remove fa-lg\"></i></li>").attr("id", users.ids[i]).data("name", users.name[i]).data("type", type);
                    item.find("span").text((type == "u" ? "用户" : (type == "r" ? "角色" : (type == "d" ? "部门" : "岗位"))) + ":" + users.name[i]);
                    $("#selectList").append(item);
                }
            }
            else {
                var idx = users.name.length - 1;
                var type = users.ids[idx].substr(0, 1);
                var item = $("<li><span></span><i class=\"fa fa-remove fa-lg\"></i></li>").attr("id", users.ids[idx]).data("name", users.name[idx]).data("type", type);
                item.find("span").text((type == "u" ? "用户" : (type == "r" ? "角色" : (type == "d" ? "部门" : "岗位"))) + ":" + users.name[idx]);
                $("#selectList").append(item);
            }
        }
    }

    function getUsers() {
        var result = { name: [], ids: [] };
        $("#selectList li").each(function (i, o) {
            result.name.push($(o).data("name"));
            result.ids.push($(o).attr("id"));
        });
        return result;
    }
    $(function () {
        $(".tab-pane ul").height($(window).height() - $("ul.nav-tabs").height() - 48);
        $("#selectList").height($(window).height() - 47);
        $("#userKws,#roleKws,#depKws,#postKws").on("keypress", function (evt) {
            if (evt.keyCode == 13) {
                $(this).parent().next("i").trigger("click");
            }
        });
        $(".search i").on("click", function () {
            var that = this, kws = $(this).prev().find("input").val();
            $.post("/WorkFlow/WorkFlow/SearchUser", {
                type: $(this).data("type"),
                kws: kws
            }, function (rsp) {
                var pl = $(that).parent().next().empty();
                var type = $(that).data("type");
                for (var n in rsp) {
                    var id = "ck_" + type + "_" + n;
                    var item = $("<li><input type=\"checkbox\" /><label></label></li>");
                    item.find(":checkbox").val(n).data("name", rsp[n]).data("type", type)
                        .attr("id", id).prop("checked", $("#" + type + "_" + n).length > 0);
                    item.find("label").attr("for", id).text(rsp[n]);
                    pl.append(item);
                }
            }, "json");
        });
        $(".tab-pane ul").on("change", ":checkbox", function () {
            var type = $(this).data("type");
            var id = $(this).val();
            if ($(this).prop("checked")) {
                var flag = $("#selectList").data("flag");
                if (flag) {
                    $("#selectList").empty().removeData("flag");
                }
                else if (!multi) {
                    $("#selectList").empty();
                }

                var d = $("#" + type + "_" + id);
                if (d.length == 0) {
                    var name = $(this).data("name");
                    var item = $("<li><span></span><i class=\"fa fa-remove fa-lg\"></i></li>").attr("id", type + "_" + id).data("name", name).data("type", type);
                    item.find("span").text((type == "u" ? "用户" : (type == "r" ? "角色" : (type == "d" ? "部门" : "岗位"))) + ":" + name);
                    $("#selectList").append(item);
                }
            }
            else {
                $("#" + type + "_" + id).remove();
            }
        });
        $(".search :checkbox").on("change", function () {
            if (!multi) {
                return;
            }
            var list = [];
            if ($(this).prop("checked")) {
                var flag = $("#selectList").data("flag");
                if (!flag) {
                    $("#selectList").data("flag", true);
                    $("#selectList li").each(function (i, s) {
                        list.push({ id: $(s).attr("id"), name: $(s).data("name"), type: $(s).data("type") });
                    });
                    $("#selectList").data("list", list);
                }
                var type = $(this).data("type");
                var item = $("<li><span></span><i class=\"fa fa-remove fa-lg\"></i></li>").attr("id", type + "_all").data("name", "全部").data("type", type);
                item.find("span").text((type == "u" ? "用户" : (type == "r" ? "角色" : (type == "d" ? "部门" : "岗位"))) + ":全部");
                $("#selectList").empty().append(item);
            }
            else {
                $("#selectList").removeData("flag");
                list = $("#selectList").empty().data("list");
                if (list && list.length > 0) {
                    list.forEach(function (s) {
                        var item = $("<li><span></span><i class=\"fa fa-remove fa-lg\"></i></li>").attr("id", s.id).data("name", s.name).data("type", s.type);
                        item.find("span").text((s.type == "u" ? "用户" : (s.type == "r" ? "角色" : (s.type == "d" ? "部门" : "岗位"))) + ":" + s.name);
                        $("#selectList").append(item);
                    });
                }
            }
        });
        $("#selectList").on("click","i", function () {
            var p = $(this).parent();
            p.remove();
            $("#ck_" + p.attr("id")).prop("checked",false);
        });
    });
</script>
